<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">

    <!--BootStrap设计的页面支持响应式的 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入主题  -->

    <link href="/bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

    <!-- 引入bootstrap的css -->

    <link href="/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!-- 引入jquery的js  因为bootstrap使用到jquery的js -->

    <script src="/js/jquery-3.3.1.min.js"></script>

    <!-- 引入bootsrap的js -->

    <script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!--    进度条-->
    <link rel="stylesheet" href="/blue/pace-theme-corner-indicator.css">
    <script src="/js/pace.js"></script>
    <title>商城首页</title>

    <!--    自定义的style-->
    <style>
        .xiaotaoobject {
            height: 140px;
            width: 140px;
            object-fit: contain;
        }
        .samesize{
            height: 400px ;
            width: 100%;
            object-fit: cover;
            text-align: center;
        }
        .samesizesmall{
            height:200px ;
            width:20px;
            object-fit: cover;
            text-align: center;
        }
        .s1{
            margin-top: 13px;
            width: auto;
        }
        .s2{
            margin-top: 9px;
            width: auto;
        }
        body{
            background-image: url("images/背景.jpg");
        }
    </style>


</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <img alt="小淘图标" class="xiaotaoobject" src="/images/order_a.jpg" />

                </div>
                <div class="col-md-6 column">
                    <div class="page-header">
                        <h1>
                            小淘商城 <p><small>2020最新潮流</small></p>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <ul class="breadcrumb">
                        <li class="active">
                            <a href="#" >首页</a>
                        </li>
                        <!--                        <li>-->
                        <!--                            <a href="#">Library</a>-->
                        <!--                        </li>-->
                        <!--                        <li class="active">-->
                        <!--                            Data-->
                        <!--                        </li>-->
                    </ul>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-8 column">
                <h5>   当前用户：<a th:text="${#strings.isEmpty(session.user)?'未登录':session.user.username}"></a></h5>
                <div class="col-md-2 column">
                    <a href="" th:href="@{/登录}"> <button class="btn btn-default" type="button" th:text="${#strings.isEmpty(session.user)?'登录':'注销'}">登录</button></a>
                </div>
                <div class="col-md-2 column">
                    <a href="#" th:href="@{/注册}"><button class="btn btn-default" type="button" >注册</button></a>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">公告</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-0">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">最新热卖</a>
                        </li>
                        <li>
                            <a href="#">最后疯抢</a>
                        </li>
                        <li class="dropdown">
                            <!--/*@thymesVar id="cid" type="String"*/-->
                            <a class="dropdown-toggle" href="#" th:text="${#strings.isEmpty(cid)}?'商家分类':${cid}"data-toggle="dropdown">商品分类<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/shopmobile}">手机</a>
                                </li>


                                <li class="divider">
                                </li>
                                <li>
                                    <a th:href="@{/shopcomputer}">电脑</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a th:href="@{/shopmp3}">MP3</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a th:href="@{/}">全部商品</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search" th:action="@{/shop}">
                        <div class="form-group">
                            <input class="form-control" type="text" name="search" />
                        </div>
                        <button class="btn btn-default" type="submit">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="s2">
                            <span class="glyphicon glyphicon-arrow-up"> </span>
                            <button class="btn btn-default" type="submit"><!--/*@thymesVar id="cid" type="String"*/-->
                            <a th:href="@{'/shopsort/'+${cid}}">按销量排序</a></button>
                        </li>
                        <li>
                            <a href="/user/cart">购物车</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" href="#" data-toggle="dropdown">个人中心<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="/user/collect">收藏夹</a>
                                </li>
                                <li>
                                    <a href="#">我的足迹</a>
                                </li>
                                <li>
                                    <a href="/我的订单">已买到的宝贝</a>
                                </li>
                                <li>
                                    <a href="/user/information">个人信息管理</a>
                                </li>
                                <li>
                                    <a href="/user/order">订单管理</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">消费者客服</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

            </nav>
        </div>
    </div>
    <!--    首页三张图-->
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="carousel slide" id="carousel-911711">
                <ol class="carousel-indicators">
                    <li class="active" data-target="#carousel-911711" data-slide-to="0">
                    </li>
                    <li data-target="#carousel-911711" data-slide-to="1">
                    </li>
                    <li data-target="#carousel-911711" data-slide-to="2">
                    </li>
                </ol>

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="samesize" >
                            <img alt="第一张图" height="400px" src="/images/首页1.jpg" /></div>
                        <div class="carousel-caption">
<!--                            <h4>-->
<!--                                First Thumbnail label-->
<!--                            </h4>-->
<!--                            <p>-->
<!--                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.-->
<!--                            </p>-->
                        </div>
                    </div>
                    <div class="item">
                        <div class="samesize">
                            <img alt="第一张图" height="400px" src="/images/首页2.png" /></div>
                        <div class="carousel-caption">
<!--                            <h4>-->
<!--                                Second Thumbnail label-->
<!--                            </h4>-->
<!--                            <p>-->
<!--                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.-->
<!--                            </p>-->
                        </div>
                    </div>
                    <div class="item">
                        <div class="samesize">
                            <img alt="第一张图" height="400px" src="/images/首页3.png" /></div>
                        <div class="carousel-caption">
                            <h4>
                                Third Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                        </div>
                    </div>
                </div> <a class="left carousel-control" href="#carousel-911711" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-911711" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12 column">
        </div>
    </div>
    <!--   商品第一行 -->
    <!--/*@thymesVar id="goods" type="ArrayList<ArrayList<Goods>>"*/-->
    <div th:each="good3: ${goods}">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row">
                <div th:each="good:${good3}">
                  <div class="col-md-4">
                    <div class="thumbnail">
                        <!--/*@thymesVar id="goodImage" type="String"*/-->
                        <div class="samesizesmall">
                        <img alt="300x200" height="200" th:src="@{'/Image/'+${good.goodImage}}"   />
                        </div>
                        <div class="caption">
                            <h3 th:text="${good.item_name}">

                            </h3>
                            <p>
                                <a th:text="${good.min_price}">299</a>元
                            </p>
                            <p>
                                <a class="btn btn-primary" href="#">直接购买</a>
                                <a class="btn" href="#" th:href="@{'/item/'+${good.id}}">查看详情</a>
                                <a class="btn" th:text="${'销量:'+ good.sell_num}"></a>
                            </p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>



    <ul class="pagination">
        <li>
            <a href="#">Prev</a>
        </li>

        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#">Next</a>
        </li>
    </ul>
</div>
</body>
</html>
